<template>
  <div class="main mt-16">
    <div class="com-box detail-type" style="padding-bottom: 12rpx;">
      <!-- 产品标题 -->
      <div class="flex flex-col items-baseline u-skeleton-fillet mb-3">
        <span class="bg-gradient-to-r from-#f31947  to-#ff6b84 text-white text-sm font-medium px-3 py-1 rounded-lg">
          {{ ProductInfo.Number}}：{{ ProductInfo.Sub }}
        </span>
        <h1 class="text-2xl font-semibold flex items-center mt-2">
          <span class="text-gray-700 border-l-2 border-gray-300">{{ ProductInfo.ProductName }}</span>
        </h1>
      </div>

      <!-- 产品标签 -->
      <div class="list-con">
        <span class="left font-bold" style="margin-left: 4px" v-if="ProductInfo.LabbelText" >
          <span class="post fix word_icon"
            v-for="(labbelText, index) in ProductInfo.LabbelText.split(',')"
            v-show="labbelText != ''"
            :key="index"
            >{{ labbelText }}
          </span>
        </span>
      </div>
    </div>

    <!-- 左边 -->
    <div class="main_left">
      <bannerSwiper :imageList="ProductImgs" height="300px"></bannerSwiper>
      <div class="main_right1 item-detail-price-row mt_10">
        <div class="n1" v-if="ProductTourDate.price > 0">
          <span class="item-price-title">价 格</span>
          <span class="item-price-mark">¥</span>
          <label class="price">{{ ProductTourDate.price }}</label><em>元起(成人)</em>
          <div class="n2"></div>
          <span class="item-price-mark">¥</span>
          <label class="price">{{ ProductTourDate.priceChild }}</label><em>元起(儿童)</em>
        </div>
        <div class="n1" v-else>
          <label class="price">暂无排期</label>
          <div class="n2"></div>
        </div>
        <!--div class="n3">
          <span class="shuimin">起价说明</span>
          <i class="iconfont icon-question"></i>
          <div class="main_right1_m">
            <div class="main_right1_m1"></div>
            <div class="main_right1_m2">
              <p>最低价 05-25 周六出发 ，<span>¥4999元</span>/人</p>
              <p>
                本起价是可选出发日期中，按2人同住一间房最低核算价格最低单人价格。产品价格会根据您所选择的出发日期、出行人数、入住酒店房型、航班或交通以及所选附加服务的不同而有所差别。
              </p>
            </div>
            <div class="main_right1_m3"></div>
          </div>
        </div-->
        <!-- 优惠券展示  v-if="ProductInfo.isVip && ProductTourDate.priceVip"-->
        <div class="n4" style="width: 300px;" v-if="isVip">
          <p class="Ellipsis">
            <span class="item-price-title">返 佣</span>
            <span class="item-coupon">
              <span>同行优惠</span>
              <span class="font-semibold px-1">{{ ProductTourDate.priceVip || 0 }}</span>
              <span>元</span>
            </span>
            <span class="item-coupon">
              <span>会员优惠</span>
              <span class="font-semibold px-1">{{ ProductTourDate.priceRoom || 0 }}</span>
              <span>元</span>
            </span>
          </p>
        </div>
      </div>
      
    </div>
    <!-- 右边 -->
    <div class="main_right">
      <div class="clear"></div>

      <!-- active -->
      <calendar
        :data="ProductTourDates"
        :day="calendar.day"
        :post="calendar.post"
        @calendarTab="handleCalendarTab"
        @SelectSchedule="handleSelectSchedule"
      ></calendar>

      <!--div class="main_right3" :class="{ active: calendar.selectBox != '请选择出团日期' }">
        <div class="select">
          <span>选择团期：</span>
          <div class="select_left" @click.stop="showBox">
            <div class="selected" :class="{ active: calendar.selectBorder == true }" >
              <div class="li">{{ calendar.selectBox }}</div>
              <div class="selected_m" :style="{ display: calendar.selectOpen == true ? 'block' : 'none' }" ref="box" >
                <div 
                  class="p" 
                  :class="{ active: calendar.num == index }"
                  @click="selectBox(calendar.index, index)"
                  v-for="(item, index) in SelectTourDates"
                >
                  {{ item.tourDate }}({{ item.weekName }}) - {{ item.price }}元起(成人)
                </div>
              </div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="select choose_route">
          <span>适用行程：</span>
          <div class="select_left">
            <div class="tirp">
              <label class="shortName"></label>
              <b>查看详细行程 <i class="iconfont icon-jiagezhengxu"></i></b>
              <a class="word_icon"></a>
            </div>
          </div>
        </div>
        <div class="select">
          <span>选择人数:</span>
          <div class="select_left">
            <div class="num">
              <span class="left">成人：</span>
              <span class="reduce" @click="handleReduce('adult')">
                <i class="iconfont icon-jianhao"></i>
              </span>
              <input type="text" id="adultNum" onblur="CheckStock()" :value="ordersForm.adultNum" />
              <span class="add" @click="handleAdd('adult')">
                <i class="iconfont icon-jiahao"></i>
              </span>
              <span class="left marel1">儿童：</span>
              <span class="reduce" @click="handleReduce('child')">
                <i class="iconfont icon-jianhao"></i>
              </span>
              <input type="text" id="childNum" onblur="CheckStock()" :value="ordersForm.childNum"/>
              <span class="add" @click="handleAdd('child')">
                <i class="iconfont icon-jiahao"></i>
              </span>
              <div class="children">
                儿童价
                <p>儿童价格及标准请咨询客户</p>
              </div>
              <div class="lack">
                <i class="iconfont icon-tishi"></i>余位不足
              </div>
            </div>
          </div>
        </div>
        <div class="select hau">
          <span>可享优惠：</span>
          <div class="select_left">
            <div class="discount">
              <p>悠哉惠玩季-下单立减500元/人</p>
              <p>在线支付-立减1000元/人</p>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div-->
      <!-- 
      active style="border:1px red solid"
      v-if="ProductInfo.isVip && userInfo.id" 
      v-if="ProductInfo.isVip && userInfo.id"
      -->
      <div class="main_right4 border-1 border-red-500" > 
        <div style="height: 42px; ">
          <div class="bot submit" @click="buyNow"  :style="{background: !ProductTourDate.id ? '#CCC' : ''}">立即预订</div>
          <div class="bot dwzx" onclick="_MEIQIA('showPanel')">点我咨询</div>
          <div class="left" >
            <div class="left1 relative" >
              <!--i class="iconfont icon-shoucang"></i> <span>收藏</span>
              <input id="collectionId" type="hidden" value="" /-->
              <i class="fas fa-map-marker-alt"></i>
              <span style="margin-left: 20px;" >出港地：</span>
              <template v-for="(post, pIndex) in ProductTourDates">
              <span class="post-select-box rounded-md" 
                @click="selectPost(pIndex, post.id)"
                :class="{ 'post-select-box-active': post.id === currentPost }"
                v-show="post.list.length > 0"
              >{{post.text}}</span>
              </template>
            </div>
            <div class="left2">|</div>
          </div>
        </div>

        <div style="height: 60px; " v-show="isVip" class="contributors-box"> 
          <adviser :advisors="ProductManager"></adviser>
          <!-- 操作人员 
          <div class="contributors-list">
            <span class="contributors-title" >
              <Icon class="icon" type="ios-people-outline" size="20" style="position: relative; top: 2px;"/>
              <label class="label">收客计调：</label>
            </span>
            <ul class="acss-1ppw8kl">
              <Poptip trigger="hover" v-for="(skr, index) in ProductManager" :key="index" placement="top-start">
                <template #content>
                  <div class="header">
                    <span class="face">
                      <img :src="skr.headimgurl" class="face"/>
                    </span>
                    <span class="content">
                      <div class="liner"><span class="label">昵称：</span><span class="value">{{ skr.skrName }}</span></div>
                      <div class="liner"><span class="label">电话：</span><span class="value tel">{{ skr.skrTel }}</span></div>
                      <div class="liner"><span class="label">评价：</span><span class="value">5.0</span></div>
                    </span>
                  </div>
                  <div class="qrcode">
                    <img :src="$config.staticDomainURL + '/' + skr.skrQrcode"/>
                  </div>
                </template>
                <template #title>
                  <span>Title</span>
                </template>
                <li><span class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-image css-19iuou"><img :src="skr.headimgurl"></span></li>
              </Poptip>
            </ul>
          </div>-->
          <!-- 办事处人员
          <div class="contributors-list">
            <span class="contributors-title" >
              <Icon class="icon" type="ios-people" size="20" style="position: relative; top: 2px;"/>
              <label class="label">办事处人员：</label>
            </span>
            <ul class="acss-1ppw8kl">
              <Poptip trigger="hover" v-for="(skr, index) in ProductManager" :key="index" placement="top-start">
                <template #content>
                  <div class="header">
                    <span class="face">
                      <img :src="skr.headimgurl" class="face"/>
                    </span>
                    <span class="content">
                      <div class="liner"><span class="label">昵称：</span><span class="value">{{ skr.skrName }}</span></div>
                      <div class="liner"><span class="label">电话：</span><span class="value tel">{{ skr.skrTel }}</span></div>
                      <div class="liner"><span class="label">评价：</span><span class="value">5.0</span></div>
                    </span>
                  </div>
                  <div class="qrcode">
                    <img :src="$config.staticDomainURL + '/' + skr.skrQrcode"/>
                  </div>
                </template>
                <template #title>
                  <span>Title</span>
                </template>
                <li><span class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-image css-19iuou"><img :src="skr.headimgurl"></span></li>
              </Poptip>
            </ul>
          </div>-->
        </div> 
      </div>
      
      <!--div class="main_right5">
        <div class="ti">行程亮点</div>
        <div class="main_right5_m">
          <div class="more" @click="setMoreHeight()">
            <span>更多</span><i class="iconfont icon-zhankai"></i>
          </div>
          <div class="main_right5_m_m" :style="{ height: height }">
            <div id="activityContent">
              <div
                class="trip-ls none"
                v-html="ProductInfo.Summary"
                id="wxData-desc"
              ></div>
            </div>
          </div>
        </div>
      </div-->

    </div>
    <div class="clear"></div>
    
  </div>
</template>

<script>
import Promotion from "./Promotion.vue";
import imgZoom from "vue2.0-zoom";
import DPlayer from "dplayer";
import bannerSwiper from "@/components/bannerSwiper/sui-banner-swiper.vue";
import calendar from "@/components/cruise/components/calendar.vue";
import adviser from "@/components/cruise/components/adviser.vue";
import {
  collectGoods,
  isCollection,
  receiveCoupon,
  cancelCollect,
} from "@/api/member.js";
import { addCartGoods, addCartTour } from "@/api/cart.js";

export default {
  name: "ShowGoods",
  components: { Promotion, imgZoom, bannerSwiper, calendar, adviser },
  props: {
    // 产品数据
    detail: {
      type: Object,
      default: null,
    },
  },
  watch: {
    detail: {
      handler(val) {
        this.skuDetail = val.result;
        // this.wholesaleList = val.wholesaleList;
        // if (this.wholesaleList && this.wholesaleList.length > 0) {
        //   this.count = this.wholesaleList[0].num;
        // }
        this.swiperGoodsImg();
      },
      deep: true,
      immediate: true,
    },
    showGoodsVideo(val) {
      if (val) {
        //this.initVideo();
      }
    },
  },
  data() {
    return {
      showGoodsVideo: false,
      goodsVideo: "",
      wholesaleList: [],
      userInfo: {},
      count: 1, // 产品数量
      imgIndex: 0, // 展示图片下标
      currentSelceted: [], // 当前产品sku
      imgList: [{ url: "" }], // 产品图片列表
      skuDetail: {
        specList: [],
      }, // sku详情
      ordersForm: {
        skuId: "",
        adultNum: 1,
        childNum: 0,
        way: "TOURGOODS",
        tourDate: '',
      },
      goodsSpecList: this.detail.specs, // 产品spec
      promotionMap: {
        // 活动状态
        SECKILL: null,
        FULL_DISCOUNT: null,
        COUPON: [],
      }, // 促销活动
      formatList: [], // 选择产品品类的数组
      loading: false, // 立即购买loading
      loading1: false, // 加入购物车loading
      isCollected: false, // 是否收藏PicZoom
      // 图片放大器
      configs: {
        width: 500,
        height: 500,
        maskWidth: 100,
        maskHeight: 100,
        maskColor: "red",
        maskOpacity: 0.2,
      },
      //-------------
      ProductImgs: [], //图片
      ProductInfo: {}, //基本信息
      ProductTourDates: {}, //价格排期
      ProductTourDate: {},
      ProductManager: {},   //收客人
      currentPost: '',
      isVip: false,
      //选择中的价格排期
      calendar: {
        post: 0,
        index: 0,
        //年
        nYear: 0,
        //月
        nMonth: 0,
        //日
        nDay: 0,
        selectOpen: false,
        selectBox: "请选择出团日期",
        selectActive: "",
        selectBorder: false,
      },
      height: "395px",
    };
  },
  computed: {
    //批发价
    wholesalePrice(key) {
      return this.wholesaleList && this.wholesaleList.length
        ? this.wholesaleList.map((item) => {
            return item.price;
          })
        : [];
    },
    wholesaleNum(key) {
      return this.wholesaleList && this.wholesaleList.length
        ? this.wholesaleList.map((item) => {
            return item.num;
          })
        : [];
    },
    SelectTourDates() {
      var list = [];
      if (this.ProductTourDates && this.ProductTourDates[this.calendar.post]) {
        list = this.ProductTourDates[this.calendar.post].list;
        list = list.filter(
          (x, index, self) =>
            x.tourDate.indexOf(
              this.calendar.nYear + "-" + this.calendar.nMonth
            ) >= 0
        );
      }
      return list;
    },
    //立即预定
    buyBtnDisabled() {
      if (ProductInfo.isVip && userInfo.id && ProductTourDate.id) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    // 初始化video
    initVideo() {
      if (!this.goodsVideo) {
        setTimeout(() => {
          this.goodsVideo = new DPlayer({
            container: document.getElementById("dplayer"),
            video: {
              url: this.skuDetail.goodsVideo,
            },
          });
        }, 100);
      }
    },

    changeCount(val) {
      if (this.wholesaleList && this.wholesaleList.length > 0) {
        if (this.count <= this.wholesaleList[0].num) {
          this.$Message.warning("批发产品购买数量不能小于起批数量");
          this.count = this.wholesaleList[0].num;
        }
      }
    },

    // 选择规格
    select(index, value) {
      this.$set(this.currentSelceted, index, value);
      let selectedSkuId = this.goodsSpecList.find((i) => {
        let matched = true;
        let specValues = i.specValues.filter((j) => j.specName !== "images");
        for (let n = 0; n < specValues.length; n++) {
          if (specValues[n].specValue !== this.currentSelceted[n]) {
            matched = false;
            return;
          }
        }
        if (matched) {
          return i;
        }
      });
      this.$emit("handleClickSku", {
        skuId: selectedSkuId.skuId,
        goodsId: this.skuDetail.goodsId,
      });
    },

    // 选择出港
    selectPost(index, value) {
      this.currentPost = value;
      this.calendar.post = index;
      console.info("selectPost", index, value);
    },

    // 添加购物车
    addShoppingCartBtn() {
      const params = {
        num: this.count,
        skuId: this.skuDetail.id,
      };
      this.loading = true;
      addCartGoods(params)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.$router.push({
              path: "/shoppingCart",
              query: { detail: this.skuDetail, count: this.count },
            });
          } else {
            this.$Message.warning(res.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // 立即购买
    buyNow() {
      // const params = {
      //   num: this.count,
      //   skuId: this.skuDetail.id,
      //   cartType: "VIRTUAL", //BUY_NOW CART
      // };

      const params = {
        cartType: "TOUR", //BUY_NOW CART
        skuId: this.ordersForm.skuId,
        num: this.ordersForm.adultNum,
        childNum: this.ordersForm.childNum,
        tourDate: this.ordersForm.tourDate,
        schepost: this.ordersForm.schepost,
        ddlx: this.skuDetail.ddlx,
      };

      //console.info("buyNow@", params, this.ordersForm);

      if (!this.ordersForm.skuId) {
        this.selectBorder();
        return;
      }

      // 虚拟产品购买
      if (this.skuDetail.goodsType === "TOUR_GOODS") {
        params.cartType = "TOUR";
      }
      this.loading1 = true;
      addCartGoods(params)
      .then((res) => {
        this.loading1 = false;
        if (res.success) {
          this.$router.push({
            path: "/pay",
            query: { way: params.cartType },
          });
        } else {
          this.$Message.warning(res.message);
        }
      })
      .catch(() => {
        this.loading1 = false;
      });
    },

    // 收藏产品
    async collect() {
      if (this.isCollected) {
        let cancel = await cancelCollect("GOODS", this.skuDetail.id);
        if (cancel.success) {
          this.$Message.success("取消收藏成功");
          this.isCollected = false;
        }
      } else {
        let collect = await collectGoods("GOODS", this.skuDetail.id);
        if (collect.code === 200) {
          this.isCollected = true;
          this.$Message.success("收藏产品成功,可以前往个人中心我的收藏查看");
        }
      }
    },

    // 格式化数据
    formatSku(list) {
      let arr = [{}];
      list.forEach((item, index) => {
        item.specValues.forEach((spec, specIndex) => {
          let name = spec.specName;
          let values = {
            value: spec.specValue,
            quantity: item.quantity,
          };
          if (name === "images") {
            return;
          }

          arr.forEach((arrItem, arrIndex) => {
            if (
              arrItem.name === name &&
              arrItem.values &&
              !arrItem.values.find((i) => i.value === values.value)
            ) {
              arrItem.values.push(values);
            }

            let keys = arr.map((key) => {
              return key.name;
            });
            if (!keys.includes(name)) {
              arr.push({
                name: name,
                values: [values],
              });
            }
          });
        });
      });
      arr.shift();
      this.formatList = arr;

      let cur = list.filter((i) => i.skuId === this.$route.query.skuId)[0];
      if (cur) {
        cur.specValues
          .filter((i) => i.specName !== "images")
          .forEach((value, _index) => {
            this.currentSelceted[_index] = value.specValue;
          });
      }
      this.skuList = list;
    },

    receiveCoupon(id) {
      // 领取优惠券
      receiveCoupon(id).then((res) => {
        if (res.success) {
          this.$Message.success("优惠券领取成功");
        } else {
          this.$Message.warning(res.message);
        }
      });
    },

    promotion() {
      // 格式化促销活动，返回当前促销的对象
      if (!this.detail.promotionMap) return false;
      let keysArr = Object.keys(this.detail.promotionMap);
      if (keysArr.length === 0) return false;

      for (let i = 0; i < keysArr.length; i++) {
        let key = keysArr[i].split("-")[0];
        if (key === "COUPON") {
          this.promotionMap[key].push(this.detail.promotionMap[keysArr[i]]);
        } else {
          this.promotionMap[key] = this.detail.promotionMap[keysArr[i]];
        }
      }
    },

    /**
     * watch 181行
     */
    swiperGoodsImg() {
      this.ProductImgs = [];
      if (this.skuDetail.specList) {
        this.skuDetail.specList.forEach((e) => {
          if (e.specName === "images") {
            this.imgList = e.specImage;
          }
        });
      } else {
        this.onLoadArticle();
      }
    },

    //----------------------------------------------------------
    /**
     * 从地址栏获取id, 如果有就读取
     */
    onLoadArticle() {
      // 基本信息
      this.onLoadProductInfo();
      //头部图片
      this.onLoadProductImgs();
      //
      this.onLoadProductTourDates();
    },

    // 基本信息
    onLoadProductInfo() {
      var cmsArticle = this.skuDetail;
      //基本信息
      this.ProductInfo = {
        Number: cmsArticle["number"] || "",
        Sub: cmsArticle["sub"] || "",
        ProductName: cmsArticle["title"] || "",
        ArticleId: cmsArticle["id"] || "",
        isVip: cmsArticle["isVip"] || false, 
        isGuestEnd: cmsArticle["isGuestEnd"] || "", //停止收客日
        //'hits': '阅读量 ' + me.PrefixZero(cmsArticle['hits'].toString() || '0', 4),
        priceNote:
          cmsArticle["price_note"] === "" || cmsArticle["price_note"] === "null"
            ? ""
            : "说明：" + cmsArticle["price_note"],
        Summary: cmsArticle["summary"] || "", // 二、行程特色
        Instructions: cmsArticle["instructions"] || "", //
        Labbel: cmsArticle["labbel"] || "", //
        LabbelText: cmsArticle["labbelText"] || "", //
        //, 'BenefitedPrice': price_vip
        //, 'Price': price
      };

      //十七、收客计调
      this.ProductManager = cmsArticle['careliners'] || [];

      this.isVip = cmsArticle["isVip"] || false;
    },

    // 头部图片
    onLoadProductImgs() {
      var ProductImgs = [];
      var photos = this.skuDetail["photos"] || [];
      if (photos && photos.length) {
        for (var i = 0, itm; i < photos.length; i++) {
          itm = photos[i];
          ProductImgs.push({
            file_path: this.$config.staticDomainURL + "/" + itm["realpath"],
            title: "",
          });
        }
      }
      this.imgList = ProductImgs;
      this.ProductImgs = ProductImgs;
      // this.ProductImgs = [
      //   {"file_path": "https://img0.uzaicdn.com/ba/sightGallery/20180307144504972.jpg"},
      //   {"file_path": "https://img4.uzaicdn.com/ba/sightGallery/20180222094206040.jpg"},
      //   {"file_path": "https://img3.uzaicdn.com/ba/sightGallery/ATT0000533460.jpg"},
      //   {"file_path": "https://img0.uzaicdn.com/ba/sightGallery/20180222093625741.jpg"},
      // ]
      //console.info(this.ProductImgs);
    },

    // 排期价格
    onLoadProductTourDates() {
      this.ProductTourDates = this.skuDetail["scheposts"];
      if (this.ProductTourDates && this.ProductTourDates.length > 0) {
        this.currentPost = this.ProductTourDates[0].id
      }
      // this.ProductTourDates = [{id: '1111111111111',data: '2222222222222222222'}]
    },

    setMoreHeight() {
      if (this.height == "395px") {
        this.height == "612px";
      } else {
        this.height == "395px";
      }
    },

    handleCalendarTab(e) {
      this.calendar.post = e.post;   //出港地点
      this.calendar.index = e.index; //排期年月
      this.calendar.nYear = e.nYear;
      this.calendar.nMonth = e.nMonth;
      this.calendar.selectBox = "请选择出团日期";
      this.calendar.selectActive = "";
      this.ProductTourDate = e;
      console.info("handleCalendarTab@@ProductTourDate", e);
    },

    handleSelectSchedule(s, o) {
      //console.info(s, o);
      var index = this.calendar.index;
      //this.ordersForm.skuId = o.id;
      this.selectBox(index, s);
      this.selectBorder();
    },

    selectBorder() {
      var i = 0;
      var interval = setInterval(() => {
        i++;
        if (i % 2 == 0) {
          this.calendar.selectBorder = false;
        } else {
          this.calendar.selectBorder = true;
        }
        if (i == 4) {
          clearInterval(interval);
          i = 0;
        }
      }, 400);
    },

    //右边行程下拉框 - 隐藏
    hideBox(e) {
      //判断是否点击的是盒子之外
      //console.info("hideBox", this.$refs.box, e.target)
      if (this.$refs.box && !this.$refs.box.contains(e.target)) {
        this.calendar.selectOpen = false;
      }
    },

    //右边行程下拉框 - 显示
    showBox() {
      this.calendar.selectOpen = !this.calendar.selectOpen;
    },

    /**
     * 右边行程下拉框 - 选择
     * @param {*} index
     * @param {*} num
     */
    selectBox(index, num) {
      var list = this.SelectTourDates;
      list.forEach((e, i) => {
        if (num == i) {
          this.ProductTourDate     = e;
          this.calendar.selectBox  = e.tourDate + "(" + e.weekName + ") - " + e.price + "/人";
          this.calendar.num        = num;
          this.calendar.day        = e.tourDate.substring(8, 10);

          this.ordersForm.skuId    = e.id;
          this.ordersForm.schepost = e.text;
          this.ordersForm.tourDate = e.tourDate;
        }
      });
      //console.info("selectBox@@@", this.ordersForm)
    },

    handleReduce(type) {
      if (type === "adult") {
        this.ordersForm.adultNum <= 1 ? 1 : this.ordersForm.adultNum--;
      } else {
        this.ordersForm.childNum <= 0 ? 0 : this.ordersForm.childNum--;
      }
    },

    handleAdd(type) {
      if (type === "adult") {
        this.ordersForm.adultNum++;
      } else {
        this.ordersForm.childNum++;
      }
    },
  },

  mounted() {
    // 用户登录才会判断是否收藏
    if (this.Cookies.getItem("userInfo")) {
      this.userInfo = JSON.parse(this.Cookies.getItem("userInfo"));
      isCollection("GOODS", this.skuDetail.id).then((res) => {
        if (res.success && res.result) {
          this.isCollected = true;
        }
      });
    }

    this.onLoadArticle();
    document.addEventListener("click", this.hideBox);

    //this.formatSku(this.goodsSpecList);
    //this.promotion();
    //document.title = this.skuDetail.goodsName;
  },
};
</script>

<style scoped lang="scss">
/******************产品图片及购买详情开始******************/
.item-detail-see {
  width: 175px;
  margin-left: 30px;
}
.flex {
  display: flex;
}
.inventory {
  padding-left: 4px;
}

.wrapper {
  @include white_background_color();
}

.item-num {
  text-align: center;
  width: 100px;
}
.item-price-num {
  font-size: 16px;
  color: #666;
}

.item-detail-show {
  width: 1200px;
  margin: 0 auto;
  padding: 30px;
  display: flex;
  flex-direction: row;
}

.item-detail-left {
  width: 350px;

  margin-right: 30px;
}

.item-detail-big-img {
  width: 367px;
  height: 275px;
  box-shadow: 0px 0px 8px $border_color;
  cursor: pointer;
}
#dplayer {
  width: 100%;
  height: 100%;
}
.item-detail-big-img img {
  width: 100%;
}

.item-detail-img-row {
  margin-top: 15px;
  display: flex;
}

.item-detail-img-small {
  width: 68px;
  height: 68px;
  box-shadow: 0px 0px 8px #ccc;
  cursor: pointer;
  margin-left: 5px;
}

.item-detail-img-small img {
  height: 100%;
  width: 100%;
}

/*产品选购详情*/
.item-detail-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-detail-title p {
  @include content_color($light_content_color);
  font-weight: bold;
  font-size: 20px;
  padding: 8px 0;
}

.item-detail-express {
  font-size: 14px;
  padding: 2px 3px;
  border-radius: 3px;
  background-color: $theme_color;
  color: #fff;
}

/*产品标签*/
.item-detail-tag {
  padding: 8px 0;
  font-size: 12px;
  color: $theme_color;
}

/*价格详情等*/
.item-detail-price-row {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: url("../../assets/images/goodsDetail/price-bg.png");
}

.item-price-left {
  display: flex;
  flex-direction: column;
}

.item-price-title {
  color: #666;
  font-size: 16px;
  margin-right: 15px;
}

.item-price-row {
  margin: 5px 0px;
}

.item-price {
  color: $theme_color;
  font-size: 20px;
  cursor: pointer;
}
.item-price-old {
  color: gray;
  text-decoration: line-through;
  font-size: 14px;
  margin-left: 5px;
}

.item-price-coupon-row {
  display: flex;
  align-items: center;
  margin: 5px 0px;
}

.Ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; //控制显示几行
  -webkit-box-orient: vertical; //webbox方向
  height: 28px;
  line-height: 28px;
  span {
  }
}

.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
  z-index: 999;
}

.dropdown .item-coupon {
  display: flex;
  align-content: center;
  align-items: center;
  color: green;
  margin: 3px 0;
  font-size: 12px;
  background-color: #ffdedf;
  border: 1px dotted $theme_color;
  cursor: pointer;
  
  span {
    padding: 3px;
  }
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

.item-coupon {
  margin-right: 5px;
  padding: 0 5px;
  color: $theme_color;
  font-size: 14px;
  background-color: #ffdedf;
  border: 1px dotted $theme_color;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  display: inline-block;
  border-radius: 5%;
  span {
    height: 20px;
    line-height: 20px;
  }
}
.item-promotion {
  margin-right: 5px;
  padding: 3px;
  color: $theme_color;
  font-size: 12px;
  border: 1px solid $theme_color;
}

.item-price-right {
  display: flex;
  align-content: center;
  align-items: center;
}

.item-remarks-sum {
  width: 70px;
  text-align: center;
  padding: 0 10px;
  border-left: 1px solid $border_color;
}

.item-remarks-sum p {
  color: #666;
  font-size: 12px;
  line-height: 10px;
  text-align: center;
}

.item-remarks-num {
  line-height: 18px;
  color: #005eb7;
}

.item-select {
  display: flex;
  flex-direction: row;
  margin-top: 15px;
}

.item-select-title {
  @include content_color($light_content_color);
  font-size: 14px;
  margin-right: 15px;
  width: 60px;
}

.item-select-column {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.item-select-row {
  margin-bottom: 8px;
}

.item-select-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.item-select-box {
  padding: 5px;
  margin-right: 8px;
  @include background_color($light_background_color);
  border: 0.5px solid $border_color;
  cursor: pointer;
  @include content_color($light_content_color);
}

.item-select-box:hover {
  border: 0.5px solid $theme_color;
}

.item-select-box-active {
  border: 0.5px solid $theme_color;
}

.item-select-intro p {
  margin: 0px;
  padding: 5px;
}

.add-buy-car-box {
  width: 100%;

  margin-top: 15px;
  border-top: 1px dotted $border_color;
}

.add-buy-car {
  display: flex;
  align-items: center;
  margin-top: 15px;
  > * {
    margin: 0 4px;
  }
}

.goodsConfig {
  display: flex;
  justify-content: space-between;
  > span {
    padding-right: 10px;
    &:hover {
      cursor: pointer;
      color: $theme_color;
    }
  }
}
.sell-point {
  font-size: 12px;
  color: red;
  margin-bottom: 5px;
}
.view-video {
  cursor: pointer;
}

.contributors-box {
  display: flex;
  display: -webkit-flex; /* Safari */
}

.contributors-list {
  margin-top: 15px!important;
  min-width: 150px;
  .contributors-title {
    display: block ;
    height: 38px;
    line-Height: 38px;
    position: relative;
    float: left;
  }

  .contributors-title .label {
    height: 38px;
    line-Height: 38px;
    margin-left: 5px;
  }

  .acss-1ppw8kl {
    list-style: none;
    float: left;
    li {
      transition: all .3s;
      height: 36px;
      line-height: 36px;
      width: 36px;
      float: left;
      img {
        vertical-align: middle;
        border-style: none;
        overflow-clip-margin: content-box;
        overflow: clip;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      span{
        color: var(--primary-color);
      }

      :where(.css-19iuou).ant-avatar {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: #fff;
        font-size: 14px;
        line-height: 30px;
        list-style: none;
        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
        position: relative;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid transparent;
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }

      :where(.css-19iuou).ant-avatar-sm {
        width: 28px;
        height: 28px;
        padding: 2px;
        line-height: 30px;
        border-radius: 50%;
        border: 1px rgb(190, 190, 190) solid;
      }

      :where(.css-19iuou).ant-avatar-image {
        background: transparent;
      }
      :where(.css-19iuou).ant-avatar >img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }

    }
  }

  .ivu-poptip-popper .ivu-poptip-body .ivu-poptip-body-content {
    .header {
      height: 80px;
      .face {
        float: left;
        img {
          width: 65px;
          height: 65px;
          margin: 5px;
        }

        img.face {
          border: 1px #eee solid;
          border-radius: 50%;
        }
      }

      .content {
        float: left;

        div {
          width: 150px;
          height: 22px;
          line-height: 22px;
        }

        .liner{
          margin-top: 3px;
          background-color: #efefef;
          border-radius: 10px;
          padding-left: 10px;
        }

        .label {
            
        }

        .value {
          font-size: 14px;
          font-weight: 600;
        }

        .tel {
          letter-spacing: 1px;
          font-family: "Lucida Console", "Eras Medium ITC", "Goudy Old Style", Default;
        }
      }
    }

    .qrcode{
      img {
        width: 225px;
        height: 200px;
      }
    }
  }
}

/******************产品图片及购买详情结束******************/
</style>
